<template>
  <el-card>
    <div class="clearfix">
      <span class="title">DNA计算与软计算</span>
      <i class="op-icon el-icon-search"></i>
      <i class="op-icon el-icon-star-off"></i>
    </div>
    <div class="info">
      <span>
        <a v-for="auth in authors" :key="auth" href="#">
          {{ auth }}
        </a>
      </span>
      -
      <a href="#">
        《系统仿真学报》
      </a>
      ,
      <span>2001</span>
      -
      <a href="#">
        <span>被引用量</span>
        100
      </a>
    </div>
    <div class="keyword">
      <el-tag size="small" type="danger">DNA计算</el-tag>
    </div>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      authors: ['丁永生', '任立红', '邵世煌']
    };
  }
};
</script>

<style lang="scss" scoped>
.keyword {
  margin-top: 5px;
}
.info {
  font-size: 13px;
  line-height: 20px;
  color: #505961 !important;
  a {
    outline: 0;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    background-color: transparent;
  }
}
.title {
  font-size: 16px;
  font-weight: bold;
}

.clearfix {
  margin-bottom: 5px;
  .op-icon {
    float: right;
    margin: 3px 10px;
  }
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
  border: none;
}
.clearfix:after {
  clear: both;
}
</style>
